<template>
  <div style="height: 95%; overflow-y: auto; overflow-x: hidden">
    <el-row type="flex" :gutter="20" style="padding-left: 20px">
      <el-col :span="4">
        <h2 class="subtitle" style="margin-top: 20px; margin-left: 5px">
          <el-button type="text" @click="goback"><i class="el-icon-back subtitle"></i></el-button>
          查看内容
        </h2>
      </el-col>
    </el-row>
    <hr style="border-bottom: none;border-color: #8c939d"/>
    <el-row type="flex" justify="space-around">
      <el-col :span="8" >
        <div style="text-align: center">
          <h2> {{demeanor.title}}</h2>
        </div>
      </el-col>
    </el-row>
    <el-row style="height:70vh;overflow-y: auto">
    <el-row type="flex" justify="end">
      <el-col :span="6" >
        <span style="color: #d3dce6">发布时间：{{demeanor.timestamp.slice(0,4)}}年{{demeanor.timestamp.slice(5,7)}}月{{demeanor.timestamp.slice(8,10)}}日</span>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-around" style="margin-top: 20px">
      <el-col :span="16" >
        <div class="pre-line" style="font-size: 20px" v-html="demeanor.content"></div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-around" style="margin-top: 30px">
      <el-col :span="16" >
        <el-carousel :interval="4000">
          <el-carousel-item v-for="item in demeanor.imgs" :key="item.id">
            <el-image style="width: 100%; height: 100%" fit="contain" :src="baseUrl+'/'+item.imgurl" @click="handlePictureCardPreview(baseUrl+'/'+item.imgurl)"></el-image>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
    </el-row>
    <el-dialog :visible.sync="dialogVisible">
      <img height="900vh" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import { baseURL } from '@/config/baseConfig'
import request from '@/network/request'

export default {
  name: 'showNotice',
  data () {
    return {
      demeanorID: this.$route.query.data,
      baseUrl: baseURL,
      dialogImageUrl: '',
      dialogVisible: false,
      demeanor: {
        id: 1,
        title: '',
        content: '',
        timestamp: '',
        imgs: []
      },
      haveAttachment: false
    }
  },
  methods: {
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file
      this.dialogVisible = true
    },
    goback: function () {
      this.$router.back(-1)
    }
  },
  created () {
    console.log(this.$route.query.data)
    request({
      method: 'get',
      url: `/bulletin/getstaffmoment?id=${this.demeanorID}`
    }).then(res => {
      if (res.data != null) {
        this.demeanor = res.data.data
      } else {
        console.log('未获取到数据')
      }
    }).catch((error) => {
      console.log(error)// 异常
    })
  }
}
</script>

<style scoped>
>>>.el-carousel__container {
  position: relative;
  height: 55vh;
}
.content-div {
  margin: 20px auto;
  width: 80%;
}
  .pre-line {
    white-space: pre-line;
  }
  .el-image{
    border-radius: 5px ;
  }
  .el-image /deep/ img {
    margin: 0px;
  }
>>>.el-dialog {
  border: none;
  background-color: rgba(0,0,0,0.6);
  position:absolute;
  left:0vw;
  top:-15.2vh;
  height: 100%;
  margin: 0 auto;
  text-align: center;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  box-sizing: border-box;
  width: 100%;
}
>>>.el-dialog .el-dialog__body {
  height:auto;
  background: rgba(0,0,0,0);
}
</style>
